<template>
	<view style="padding-left:30rpx;padding-right:30rpx;">
		<view v-if="ArtisterInfo.UserPhotos && ArtisterInfo.UserPhotos.length !== 0 && ArtisterInfo.UserBaseinfo">
			<view style="padding-top:20rpx;padding-bottom:20rpx;">在线模卡</view>
			<view style="height:250rpx;">
				<view style="height:220rpx;background-color:#FFDD00;border-radius:10rpx;padding:20rpx;">
					<view style="width:25%;float:left">
						<view style="width:173rpx;height:220rpx;background-color:#000;">
							<image :src="ArtisterInfo.UserPhotos[0]" mode="aspectFill" style="width:100%;height:220rpx">
							</image>
						</view>
					</view>
					<view style="float:right;width:70%;">
						<view class="flexbc">
							<view style="width: 60%;">
								<view class="text-name" style="font-size:34rpx;font-weight: bold;">
									{{ ArtisterInfo.NickName }}</view>
								<view style="font-size:24rpx;color:#999"
									v-if="ArtisterInfo.UserPhotos && ArtisterInfo.PublicRoles.length !== 0">
									<span v-for="(item, index) in ArtisterInfo.PublicRoles" :key="index">
										{{ item.LabelName }}/
									</span>
								</view>
							</view>
							<view class="editBtn" @click="goMyPage">编辑完善</view>
						</view>
						<view class="flexbc" style="margin-top:40rpx" v-if="UserBaseinfo !== null">
							<view style="font-size:24rpx;text-align:center;padding:10rpx;">
								<view>{{ UserBaseinfo.shengao }}</view>
								<view>身高</view>
							</view>
							<view style="font-size:24rpx;text-align:center;padding:10rpx;">
								<view>{{ UserBaseinfo.tizhong }}</view>
								<view>体重</view>
							</view>
							<view style="font-size:24rpx;text-align:center;padding:10rpx;">
								<view v-if="UserBaseinfo.sanwei[0] == undefined"></view>
								<view v-else>
									{{ UserBaseinfo.sanwei[0] }}-{{ UserBaseinfo.sanwei[1] }}-{{ UserBaseinfo.sanwei[2] }}
								</view>
								<view>三围</view>
							</view>
							<view style="font-size:24rpx;text-align:center;padding:10rpx;"
								v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 0">
								<view>{{ UserBaseinfo.zhaobei }}</view>
								<view>罩杯</view>
							</view>
							<view style="font-size:24rpx;text-align:center;padding:10rpx;">
								<view>{{ UserBaseinfo.jiaoma }}</view>
								<view>鞋码</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-top:40rpx;padding-bottom:20rpx;">图片模卡</view>
		<view class="releaseBoxs">
			<view v-for="(item, index) in TemplateTypeList" :key="index" class="releaseBtn"
				:style="{backgroundImage: 'url('+item.MokaTemplateTypePic+')',backgroundPosition:'center',backgroundSize:'cover'}"
				@click="goPage(item.MokaTemplateTypeID)">

				<view class="releaseTitle">{{ item.MokaTemplateTypeName }}</view>
				<view class="releaseShorts">{{ item.MokaTemplateTypeMemo }}</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LoginInfo: {},
				ArtisterInfo: {
					PublicRoles: []
				},
				UserBaseinfo: {},
				TemplateTypeList: []
			};
		},
		onShow() {

			this.LoginInfo = uni.getStorageSync("isLogin");
			this.onGetList();
		},
		methods: {
			onGetList() {
				this.$httpost('/Artister/info', {
					ArtisterID: this.LoginInfo.UserID
				}).then(res => {
					if (res.code == 200) {

						this.ArtisterInfo = res.data.ArtisterInfo;
						this.UserBaseinfo = JSON.parse(this.ArtisterInfo.UserBaseinfo)
					}

				});

				this.$httpost('/Moka/TemplateType', {}).then(res => {

					if (res.code == 200) {
						this.TemplateTypeList = res.data;
					}

				});
			},
			goPage(MokaTemplateTypeID) {
				uni.navigateTo({
					url: '/moka/pages/publicMoka?templateTypeID=' + MokaTemplateTypeID
				})
			},
			goMyPage() {
				uni.navigateTo({
					url: '/moka/pages/mokaMyInfo'
				})
			},
			goTab(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.text-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.releaseBoxs {
		clear: both;
		margin-top: 10rpx;
	}

	.releaseBtn {
		height: 140rpx;
		background-color: #FFDD00;
		color: #000;
		border-radius: 10rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
	}

	.releaseIcon {
		float: right;
		width: 120rpx;
		height: 120rpx;
	}

	.releaseText {
		float: left;
		width: 220rpx;
		padding-top: 10rpx;
		margin-left: 20rpx;
	}

	.releaseTitle {
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
	}

	.releaseShorts {
		font-size: 28rpx;
		color: #999
	}

	.editBtn {
		width: 120rpx;
		height: 35rpx;
		padding: 10rpx;
		background-color: #000;
		color: #FFDD00;
		border-radius: 100rpx;
		font-size: 24rpx;
		text-align: center;
	}
</style>